<template>
	<view class="container">
		<view class="header">
			<view class="search-bar">
				<text class="iconfont icon-search"></text>
				<input type="text" placeholder="搜索截图" placeholder-class="placeholder" v-model="searchText" />
			</view>
			<scroll-view scroll-x class="game-scroll" show-scrollbar="false">
				<view class="game-tags">
					<text class="game-tag" 
						v-for="game in games" 
						:key="game.game_id"
						:class="{ active: activeGame === game.game_id }"
						@click="setGame(game.game_id)">
						{{ game.game_name }}
					</text>
				</view>
			</scroll-view>
		</view>
		
		<view class="screenshot-grid">
			<view class="screenshot-item" 
				v-for="screenshot in filteredScreenshots" 
				:key="screenshot.id"
				@click="previewImage(screenshot)">
				<image :src="screenshot.url" mode="aspectFill" class="screenshot-image" />
				<view class="screenshot-info">
					<view class="author">
						<image :src="screenshot.author.avatar" class="author-avatar" mode="aspectFill" />
						<text class="author-name">{{ screenshot.author.name }}</text>
					</view>
					<view class="likes">
						<text class="iconfont icon-like"></text>
						<text class="count">{{ screenshot.likes }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="upload-btn" @click="uploadScreenshot">
			<text class="iconfont icon-camera"></text>
			<text>上传截图</text>
		</view>
	</view>
</template>

<script>
import { games } from '../../../utils/gameData.js';

export default {
	data() {
		return {
			searchText: '',
			activeGame: '',
			games: games,
			screenshots: []
		}
	},
	computed: {
		filteredScreenshots() {
			let filtered = this.screenshots;
			
			if (this.searchText) {
				const searchLower = this.searchText.toLowerCase();
				filtered = filtered.filter(screenshot => 
					screenshot.game.name.toLowerCase().includes(searchLower)
				);
			}
			
			if (this.activeGame) {
				filtered = filtered.filter(screenshot => screenshot.game.id === this.activeGame);
			}
			
			return filtered;
		}
	},
	created() {
		this.generateMockData();
	},
	methods: {
		generateMockData() {
			// 生成20条模拟截图数据
			this.screenshots = Array(20).fill().map((_, index) => {
				const game = games[Math.floor(Math.random() * games.length)];
				
				return {
					id: `screenshot_${index}`,
					url: game.game_banner,
					game: {
						id: game.game_id,
						name: game.game_name
					},
					author: {
						name: this.getRandomName(),
						avatar: '/static/tiwen.gif'
					},
					likes: Math.floor(Math.random() * 1000)
				};
			});
		},
		getRandomName() {
			const names = ['摄影师', '玩家', '收藏家', '探索者', '艺术家'];
			return names[Math.floor(Math.random() * names.length)];
		},
		setGame(gameId) {
			this.activeGame = this.activeGame === gameId ? '' : gameId;
		},
		previewImage(screenshot) {
			uni.previewImage({
				urls: [screenshot.url],
				current: 0
			});
		},
		uploadScreenshot() {
			uni.chooseImage({
				count: 1,
				success: (res) => {
					// 这里应该处理图片上传
					uni.showToast({
						title: '上传成功',
						icon: 'success'
					});
				}
			});
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: #1E1E2E;
	padding: 12px;
	padding-bottom: 80px;
}

.header {
	background: #2D2D44;
	border-radius: 12px;
	padding: 15px;
	margin-bottom: 15px;
}

.search-bar {
	display: flex;
	align-items: center;
	background: #1E1E2E;
	border-radius: 20px;
	padding: 8px 15px;
	margin-bottom: 12px;
}

.search-bar input {
	flex: 1;
	margin-left: 8px;
	color: #9796B8;
	font-size: 14px;
}

.placeholder {
	color: #6E6C89;
}

.game-scroll {
	white-space: nowrap;
}

.game-tags {
	display: inline-flex;
	gap: 10px;
	padding: 4px 0;
}

.game-tag {
	padding: 4px 12px;
	border-radius: 15px;
	font-size: 14px;
	color: #6E6C89;
	background: #1E1E2E;
	white-space: nowrap;
}

.game-tag.active {
	background: #9796B8;
	color: #1E1E2E;
}

.screenshot-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.screenshot-item {
	background: #2D2D44;
	border-radius: 12px;
	overflow: hidden;
}

.screenshot-image {
	width: 100%;
	height: 150px;
}

.screenshot-info {
	padding: 8px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.author {
	display: flex;
	align-items: center;
	gap: 6px;
}

.author-avatar {
	width: 20px;
	height: 20px;
	border-radius: 10px;
}

.author-name {
	font-size: 12px;
	color: #6E6C89;
}

.likes {
	display: flex;
	align-items: center;
	gap: 4px;
	color: #6E6C89;
	font-size: 12px;
}

.upload-btn {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: #9796B8;
	color: #1E1E2E;
	padding: 10px 25px;
	border-radius: 25px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.iconfont {
	font-size: 16px;
	color: #6E6C89;
}

.upload-btn .iconfont {
	color: #1E1E2E;
}
</style> 